Migrate to standalone components

angular/src/app/about/container/about/about.component.ts

@@ -1,11 +1,20 @@
+import {
+  AsyncPipe,
+  JsonPipe,
+  KeyValuePipe,
+  NgFor,
+  NgIf,
+} from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { Device } from '@capacitor/device';
-import { Observable, from, map } from 'rxjs';
+import { from, map, Observable } from 'rxjs';
 
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
+  standalone: true,
   styleUrls: ['./about.component.css'],
+  imports: [JsonPipe, NgFor, KeyValuePipe, NgIf, AsyncPipe],
 })
 export class AboutComponent implements OnInit {
   deviceInfo$: Observable<{}>;

angular/src/app/about/index.ts

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+import { AboutComponent } from './container/about/about.component';
+
+export const ABOUT_ROUTES: Routes = [
+  {
+    path: '',
+    component: AboutComponent,
+  },
+];

angular/src/app/app-routes.ts

@@ -0,0 +1,18 @@
+import { Routes } from '@angular/router';
+import { CallbackComponent } from './shell/callback/callback.component';
+
+export const APP_ROUTES: Routes = [
+  {
+    path: 'doggos',
+    loadChildren: () => import('./doggos').then((m) => m.DOGGOS_ROUTES),
+  },
+  {
+    path: 'about',
+    loadChildren: () => import('./about').then((m) => m.ABOUT_ROUTES),
+  },
+  {
+    path: 'callback',
+    component: CallbackComponent,
+  },
+  { path: '', redirectTo: '/doggos', pathMatch: 'full' },
+];

angular/src/app/app.component.ts

@@ -3,11 +3,14 @@ import { App, URLOpenListenerEvent } from '@capacitor/app';
 import { Store } from '@ngrx/store';
 import { AuthActions } from './auth/store/auth.actions';
 import { SignalRService } from './common/real-time/signalr.service';
+import { LayoutComponent } from './shell/layout/layout.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
+  standalone: true,
   styleUrls: ['./app.component.css'],
+  imports: [LayoutComponent],
 })
 export class AppComponent implements OnInit {
   title = 'ratemydoggo';

angular/src/app/doggos/container/add-doggo/add-doggo.component.ts

@@ -1,17 +1,21 @@
-import { PlatformInformationService } from '../../../common/platform-information/platform-information.service';
-import { getLastAddedDoggo, getLoading } from './../../store/doggos.selectors';
-import { Observable } from 'rxjs';
+import { AsyncPipe, NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
-import { Store, select } from '@ngrx/store';
-import { DoggosActions } from '../../store/doggos.actions';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { select, Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { PlatformInformationService } from '../../../common/platform-information/platform-information.service';
 import { Doggo } from '../../models/doggo';
 import { MobileCameraService } from '../../services/mobile-camera.service';
+import { DoggosActions } from '../../store/doggos.actions';
+import { getLastAddedDoggo, getLoading } from './../../store/doggos.selectors';
 
 @Component({
   selector: 'app-add-doggo',
+  standalone: true,
   templateUrl: './add-doggo.component.html',
   styleUrls: ['./add-doggo.component.css'],
+  imports: [AsyncPipe, RouterLink, NgIf, ReactiveFormsModule],
 })
 export class AddDoggoComponent implements OnInit {
   formGroup = this.fb.group({

angular/src/app/doggos/container/main-doggo/main-doggo.component.ts

@@ -1,19 +1,23 @@
-import { SignalRService } from '../../../common/real-time/signalr.service';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { Doggo } from '../../models/doggo';
+import { DoggoListComponent } from '../../presentational/doggo-list/doggo-list.component';
+import { DoggoRateComponent } from '../../presentational/doggo-rate/doggo-rate.component';
+import { DoggosActions } from '../../store/doggos.actions';
 import {
   getAllDoggosButSelected,
   getLoading,
   getSelectedDoggo,
 } from './../../store/doggos.selectors';
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
-import { Doggo } from '../../models/doggo';
-import { DoggosActions } from '../../store/doggos.actions';
-import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-main-doggo',
   templateUrl: './main-doggo.component.html',
+  standalone: true,
   styleUrls: ['./main-doggo.component.css'],
+  imports: [AsyncPipe, DoggoListComponent, DoggoRateComponent, NgIf],
 })
 export class MainDoggoComponent implements OnInit {
   doggos$: Observable<Doggo[]>;

angular/src/app/doggos/container/my-doggos/my-doggos.component.ts

@@ -1,14 +1,18 @@
-import { getMyDoggos } from './../../store/doggos.selectors';
+import { AsyncPipe, DatePipe, DecimalPipe, NgFor } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { select, Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { Doggo } from '../../models/doggo';
 import { DoggosActions } from '../../store/doggos.actions';
+import { getMyDoggos } from './../../store/doggos.selectors';
 
 @Component({
   selector: 'app-my-doggos',
+  standalone: true,
   templateUrl: './my-doggos.component.html',
   styleUrls: ['./my-doggos.component.css'],
+  imports: [AsyncPipe, RouterLink, DatePipe, DecimalPipe, NgFor],
 })
 export class MyDoggosComponent implements OnInit {
   doggos$: Observable<Doggo[]>;